<template>
  <div class="">
    <h1>vue3的provide函数和inject函数真简单，后代组件通讯。</h1>
    <p>
      使用场景：有个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据
    </p>

    <h2>我是子组件 {{ num }}</h2>
    <!-- 这个是孙子组件 -->
    <zi></zi>
  </div>
</template>

<script >
import { inject } from "vue";
import zi from "../components/zi.vue";
export default {
  setup(props, { emit }) {
    // 接收父组件传过来的数据
    const num = inject("num");
    console.log(num);
    return {
      num,
    };
  },
  components: { zi },
};
</script>

<style lang="scss" scoped></style>
